<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<style>
		.box {
			width: 100px;
			height: 100px;
			background-color: palevioletred;
			transition: .3s;
		}
	</style>
	<body>
		<div id="app">
			<div class="box" :style="{
				transform: 'translate(' + x + 'px, ' + y + 'px) scale(' + s + ')'
			}"></div>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						x: 0,
						y: 0,
						s: 1
					}
				},
				mounted() {
					document.addEventListener('keydown', this.move);
				},
				methods: {
					move(event) { //整个文档添加键盘事件
						let code = event.keyCode; // 键码
						if (code == 187 || code == 107) this.s += 0.1; // 放大
						if (code == 189 || code == 109) this.s -= 0.1; // 缩小
						if (code === 37) { // 左边
							if (this.x > 0) this.x -= 10;
						}
						if (code === 38) { // 上边
							if (this.y > 0) this.y -= 10;
						}
						if (code === 39) {
							this.x += 10;
						}
						if (code === 40) {
							this.y += 10;
						}
					}
				}
			}).mount('#app');
		</script>
	</body>
</html>